<template>
  <div class="page">
    <div v-if="canIGetUserInfo" style="width:100%">
    <!-- 已登录头部 -->
      <el-row >
        <el-col :sm="{span:12}" :xs="18">
          <div class="leftPart">
            <div class="welcomeTitle" @click="toUserCenter">你好,{{ userInfo.nickName }}</div>
            <div class="avatar" @click="toUserCenter">
              <el-avatar :size="45" :src="userInfo.imageUrl+Math.random()" @error="true" fit="cover">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </div>
          </div>
        </el-col>

        <el-col :span="12" class="hidden-xs-only">
          <div class="rightPart">
            <router-link to="/usercenter" class="text">个人中心</router-link>
            <div class="text" @click="logout">退出登录</div>
          </div>
        </el-col>

        <el-col :span="6" class="hidden-sm-and-up">
          <div class="rightPart">
            <el-popover
              placement="bottom"
              width="150"
              trigger="click"
              >
              <router-link to="/usercenter" class="xs-text">个人中心</router-link>
              <div class="xs-text" @click="logout">退出登录</div>
              <div class="el-icon-s-operation" slot="reference" ></div>
            </el-popover>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 未登录头部 -->
    <div v-else>
      <router-link to="/registerAndLogin/login" class="router"
        >登录</router-link
      >
      <router-link to="/registerAndLogin/register" class="router"
        >注册</router-link
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      canIGetUserInfo: (state) => state.user.canIGetUserInfo,
    }),
  },
  methods: {
    //退出登录
    async logout() {
      try {
        let result = await this.$store.dispatch("logout");
        console.log(result);
      } catch (error) {
        console.log(error);
      }
    },

    //前往个人中心
    toUserCenter(){
      this.$router.push({
        name:'usercenter'
      })
    }
  },
};
</script>

<style scoped lang="less">
.page {
  width: 100%;
  height: 60px;
  background-color: #2d2f33;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30px;
  .router {
    width: 50px;
    text-decoration: none;
    font-weight: 600;
    color: #f4d8ab;
    margin: 0 15px 0 15px;
  }
  .leftPart {
    display: flex;
    align-items: center;
    height: 60px;
    .welcomeTitle {
      text-decoration: none;
      font-weight: 600;
      color: #f4d8ab;
      // margin-left:15px;
      &:hover{
        cursor: pointer;
      }
    }
    .avatar {
      display: flex;
      align-items: center;
      margin-left: 15px;
      :deep(img){
          width: 45px;
      }
      &:hover{
        cursor: pointer;
      }
    }
  }

  .rightPart {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    .text {
      width: 70px;
      text-decoration: none;
      font-weight: 600;
      color: #f4d8ab;
      margin: 0 15px 0 15px;
      cursor: pointer;
    }
    .el-icon-s-operation{
      font-size: 30px;
      color: #f4d8ab;
    }
  }
}

.el-popover .xs-text{
  width: 70px;
  text-decoration: none;
  font-weight: 600;
  color:#606066;
  &:not(:first-child){
    margin-top: 10px;
  }
}
</style>